<template>
  <!-- Header 组件 -->
  <Header></Header>
  <!-- 面包屑导航 -->
  <Crumb></Crumb>
  <div class="main" v-if="goodsList.length>0">
      <el-row :gutter="12">
        <el-col :span="6" v-for="(item,index) in goodsList" :key="index" class="mb-1">
          <div class="box">
            <img :src="item.imgPath" @click="toDetails(item.cid)">
            <p class="price">&yen;<span>{{ item.price }}</span>.00</p>
            <p>{{ item.desc }}</p>
            <p><span class="blue">{{ item.comment }}</span>条评价</p>
            <p>
              <el-row>
                <el-col :span="12" align="center"  class="sc"><el-icon><Star /></el-icon> 收藏</el-col>
                <el-col :span="12" align="center" class="comment"><el-icon><ChatLineSquare /></el-icon> 评论</el-col>
              </el-row>
            </p>
          </div>
        </el-col>
      </el-row>
  </div>
  <div v-else>
    <p class="empty">该厂家商品已经售罄，请选择其它厂家商品!</p>
  </div>
  <!-- Footer 组件 -->
  <Footer></Footer>
</template>

<script setup>
import Header from "@/components/Header.vue"   //@是./src目录的别名，在vite.config.js配置
import Footer from "@/components/Footer.vue"
import Crumb from "@/components/Crumb.vue"
import { reactive,computed,getCurrentInstance,onMounted } from 'vue'
import { useRoute,useRouter } from "vue-router"
const { proxy } = getCurrentInstance()  //获取当前实例的代理对象proxy
import { Star,ChatLineSquare } from '@element-plus/icons-vue'
const route = useRoute()
const router = useRouter()
const data = reactive({
  goods:[]
})

//计算属性，根据传递过来的参数获得商品列表
const goodsList =computed(()=>{
  let temp =[]
  let k =0
  //根据传递的cid获取商品数据
  if("undefined" != typeof route.query.cid){
    for (let i in data.goods) {
      if(route.query.cid.length==3) {     //cid是一级分类
        if (data.goods[i].cid.substring(0,3)==route.query.cid) {
          temp[k++] = data.goods[i]
        }
      } else {        //cid是二级分类
        if (data.goods[i].cid==route.query.cid) {
          temp[k++] = data.goods[i];
        }
      }
    }
    return temp
  }
  
  if("undefined" != typeof route.query.cname || "undefined" != typeof route.query.keys){
    let reg1
    //根据传递参数cname(公司名称)获取商品数据
    if("undefined" != typeof route.query.cname) {
      reg1= new RegExp(route.query.cname,"i")
    } else {   //根据传递参数是搜索关键字获取商品数据
      reg1= new RegExp(route.query.keys,"i")
    }
    for (let i in data.goods) {
      if(reg1.test(data.goods[i].name) || reg1.test(data.goods[i].desc) ) {
        temp[k++] = data.goods[i];
      }
    }
    return temp
  }
})

let getGoods = ()=>{        //取得全部商品数据
  proxy.$http({                
    method:"get",               
    url:"./data/goods-copy.json"
  }).then(res=>{
    data.goods = res.data
  })
}

const toDetails = (cid)=>{
  router.push({name:'details',query:{cid:cid}})
}

onMounted(()=>{
  getGoods()
})
</script>

<style scoped>
.box{
  padding:1% 2%;
  border:1px solid #ddd;
  border-radius: 2px;
  cursor: pointer;
}
.box>img{
  border-radius: 3px;
  width:100%;
}
.box>p{
  margin:4% 0;
}
p.price{
  color:red;
  font-size:0.8rem;
  font-weight: bold;
}
p.price>span{
  font-size:1.3rem;
  padding-left:5px; 
}
.blue{
  color:rgb(152, 212, 247);
  font-weight: bold;
  font-size:1.05rem;
}
.sc,.comment{
  border:1px solid #b07382;
  padding:5px;
  background-color: #eae1e1;
}
.sc{
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.comment{
  border-left:none;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
</style>